<template>
  <div class="goods-box">
    <div class="goods-item" v-for="item in goods" :key="item.iid" @click="goDetail(item.iid || item.shop_id)">
      <img :src="imgUrl(item)" alt="" @load='imageLoad'/>
      <p class="goods-title">{{ item.title }}</p>
      <p class="goods-price">
        <span>￥{{ item.price }}</span>
        <span>{{ item.cfav }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsList",
  props: {
    goods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed:{
    imgUrl(){
     return (item) => {
       return item.show? item.show.img : item.image
      }
    }
  },
  methods:{
    imageLoad(){
      // 原生监听图片方法
      // img.onload = function(){}
      this.$bus.$emit('itemIamgeLoad')
      if(this.$route.path.indexOf('/home')){
        this.$bus.$emit('homeItemLoad')
      }else if(this.$route.path.indexOf('/detail')){
        this.$bus.$emit('detailItemLoad')
      }
    },
    goDetail(id){
      this.$router.push({
        path: '/detail/'+id
      })
    }
  }
};
</script>
<style scoped>
.goods-box {
  display: flex;
  justify-content: space-around;
  flex-flow: row;
  flex-wrap: wrap;
  padding: 2px;
}
.goods-item {
  border: 2px solid #f9f2f2;
  margin-bottom: 5px;
  width: 49%;
  box-sizing: border-box;
}

.goods-item img {
  width: 100%;
}
.goods-title {
  padding: 5px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 1px;
}
.goods-price {
  display: flex;
  padding: 0 5px;
}
.goods-price span {
  flex: 1;
  font-weight: bold;
}
.goods-price span:nth-child(2){
    text-align: right;
}
.goods-price span:nth-child(2):before {
  content: "💓   ";
}
</style>